<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
  Button,
  Card,
  Col,
  Row,
  Statistic,
  Tabs,
  TabPane,
} from 'ant-design-vue';

import MaintenanceSchedule from './schedule.vue';
import MaintenanceList from './list.vue';
import PurchaseManagement from './purchase.vue';

const activeTab = ref('schedule');

const overview = ref({
  totalMaintenance: 0,
  pendingMaintenance: 0,
  completedMaintenance: 0,
  totalPurchase: 0,
  pendingPurchase: 0,
  completedPurchase: 0,
});

const loadOverview = async () => {
  try {
    // 模拟数据
    overview.value = {
      totalMaintenance: 156,
      pendingMaintenance: 23,
      completedMaintenance: 133,
      totalPurchase: 89,
      pendingPurchase: 12,
      completedPurchase: 77,
    };
  } catch (error) {
    console.warn('加载概览数据失败:', error);
  }
};

onMounted(() => {
  loadOverview();
});
</script>

<template>
  <Page title="维护与采购管理" subtitle="管理资源维护计划和采购流程">
    <div class="maintenance-overview">
      <!-- 统计概览 -->
      <Row :gutter="16" style="margin-bottom: 24px">
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="维护计划总数"
              :value="overview.totalMaintenance"
              :value-style="{ color: '#1890ff' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:calendar-check" />
              </template>
            </Statistic>
          </Card>
        </Col>
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="待处理维护"
              :value="overview.pendingMaintenance"
              :value-style="{ color: '#faad14' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:clock-outline" />
              </template>
            </Statistic>
          </Card>
        </Col>
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="已完成维护"
              :value="overview.completedMaintenance"
              :value-style="{ color: '#52c41a' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:check-circle" />
              </template>
            </Statistic>
          </Card>
        </Col>
      </Row>

      <Row :gutter="16" style="margin-bottom: 24px">
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="采购申请总数"
              :value="overview.totalPurchase"
              :value-style="{ color: '#722ed1' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:shopping" />
              </template>
            </Statistic>
          </Card>
        </Col>
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="待审批采购"
              :value="overview.pendingPurchase"
              :value-style="{ color: '#faad14' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:clock-outline" />
              </template>
            </Statistic>
          </Card>
        </Col>
        <Col :span="8">
          <Card :bordered="false">
            <Statistic
              title="已完成采购"
              :value="overview.completedPurchase"
              :value-style="{ color: '#52c41a' }"
            >
              <template #prefix>
                <IconifyIcon icon="mdi:check-circle" />
              </template>
            </Statistic>
          </Card>
        </Col>
      </Row>

      <!-- 功能模块 -->
      <Card :bordered="false">
        <Tabs v-model:active-key="activeTab" type="card">
          <TabPane key="schedule" tab="维护计划">
            <MaintenanceSchedule />
          </TabPane>
          <TabPane key="list" tab="维护记录">
            <MaintenanceList />
          </TabPane>
          <TabPane key="purchase" tab="采购管理">
            <PurchaseManagement />
          </TabPane>
        </Tabs>
      </Card>
    </div>
  </Page>
</template>

<style scoped>
.maintenance-overview {
  padding: 20px;
}
</style>
